<template>
  <div class="class">
    <el-card class="card">
        <!-- 班级表格数据 -->
        <div v-show="classText">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>班级管理</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 搜索框 -->
          <div class="user-search">
              <el-input
              placeholder="请输入班级名"
              clearable
              v-model="query"
              class="input-with-select"
              @clear="getClassclear()"
              @input="getClasslist()"
              >
              </el-input>
              <el-button type="success" class="addexam-btn" @click="addClassbtn()">添加班级</el-button>
          </div>
          <!-- 表格 -->
          <div class="text">
               <el-table
              :data='classlist'
              stripe
              style="width: 100%"
              height="470"
              v-loading="loading"
              >
                <el-table-column
                type="index"
                width="40"
                >
                </el-table-column>
                <el-table-column
                prop="claName"
                label="班级名称"
                width="580"
                >
                </el-table-column>
                <el-table-column
                prop="teacher.name"
                label="班主任"
                width="120"
                >
                </el-table-column>
                <el-table-column
                prop="editor"
                label="编辑"
                >
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        plain
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        @click="classEditor(scope.row)"
                        >
                        </el-button>
                        <el-button
                        size="mini"
                        plain
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="classDelete(scope.row)"
                        >
                        </el-button>
                        <el-button
                        size="mini"
                        plain
                        type="info"
                        icon="el-icon-menu"
                        circle
                        @click="openStudent(scope.row)"
                        >
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
          </div>
          <!-- 分页组件 -->
          <div class="Conpager">
            <el-pagination
            class='stu-pager'
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 班级学生表格数据 -->
        <div class="text" v-show="studentText">
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>班级管理</el-breadcrumb-item>
                <el-breadcrumb-item>班级下的学生</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <div class="user-search">
                <el-input
                :value="this.claName"
                disabled
                class="input-with-select"
                >
                </el-input>
                <el-button type="success" class="addexam-btn" @click="addstubtn()">添加学生</el-button>
                <el-button type="primary" class="back-btn" @click="back()">返回</el-button>
            </div>
            <!-- 学生列表信息 -->
            <div class="text item">
              <el-table
              ref="multipleTable"
              tooltip-effect="dark"
              :data='studentlist'
              stripe
              style="width: 100%"
              height="470"
              >
                <el-table-column
                type="index"
                width="40"
                >
                </el-table-column>
                <el-table-column
                prop="sid"
                label="学号"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="sname"
                label="姓名"
                width="120"
                >
                </el-table-column>
                <el-table-column
                prop="major"
                label="专业"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="cla"
                label="班级"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="grade"
                label="届别"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="editor"
                label="编辑"
                >
                  <template slot-scope="scope">
                    <el-button
                    size="mini"
                    plain type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="deleteOpen(scope.row)"
                    >
                    </el-button>
                  </template>
                </el-table-column>
             </el-table>
          </div>
        </div>
        <!-- 添加班级 -->
        <el-dialog title="添加班级" :visible.sync="dialogAdd" style="min-width: 1300px" @opened="ToFocus(1)">
            <el-form :model="form" style="text-align:left;margin-left:25%">
                <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.claName" autocomplete="off" style="width:300px" ref="one"></el-input>
                </el-form-item>
                <el-form-item label="班主任" :label-width="formLabelWidth">
                    <el-select v-model="form.tid" placeholder="请选择教师"  style="width:300px">
                        <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align:center">
                <el-button type="primary" @click="createdclass()">确 定</el-button>
                <el-button @click="dialogAdd = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 编辑班级 -->
        <el-dialog title="编辑班级" :visible.sync="dialogEdit" style=" min-width: 1300px" @opened="ToFocus(2)">
            <el-form :model="form" style="text-align:left;margin-left:25%">
                <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="form.claName" autocomplete="off" style="width:300px" ref="two"></el-input>
                </el-form-item>
                <el-form-item label="班主任" :label-width="formLabelWidth">
                  <el-select v-model="form.tid" placeholder="请选择教师"  style="width:300px">
                        <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align:center">
                <el-button type="primary" @click="editorclass()">确 定</el-button>
                <el-button @click="dialogEdit = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加学生进入班级 -->
        <el-dialog title="添加学生" :visible.sync="dialogstu" style=" min-width: 1300px" @opened="ToFocus(3)">
            <el-form :model="form" style="text-align:left;margin-left:25%">
                <el-form-item label="班级" :label-width="formLabelWidth">
                <el-input v-model="this.claName" autocomplete="off" disabled style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="学生" :label-width="formLabelWidth">
                <el-input v-model="form.sid"
                placeholder="请输入学生学号"
                autocomplete="off"
                @keyup.native.enter="createdstu()"
                style="width:300px"
                ref="three"
                >
                </el-input>
                <div class="testcolor">*输入的学号必须是已经存在的</div>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align:center">
                <el-button type="primary" @click="createdstu()">确 定</el-button>
                <el-button @click="dialogstu = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'class',
  data () {
    return {
      loading: false,
      dialogAdd: false,
      dialogEdit: false,
      classText: true,
      studentText: false,
      dialogstu: false,
      studentlist: [],
      query: '',
      claId: '',
      claName: '',
      sid: '',
      formLabelWidth: '50px',
      form: {},
      classlist: [],
      teacherlist: [],
      pageNum: 1,
      pageSize: 8,
      totalCount: -1
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  created () {
    this.getClasslist()
    this.getteacherlist()
  },
  methods: {
    // 获取班级信息
    async getClasslist () {
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`classes/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&name=${this.query}`)
      // console.log(res)
      const {code, msg, page} = res.data
      if (code === 200) {
        this.classlist = page.list
        this.totalCount = page.totalCount
        this.loading = false
      } else {
        this.$message.error(msg)
        this.loading = false
      }
    },
    // 获取教师信息
    async getteacherlist () {
      const res = await this.$http.get(`teacher/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.teacherlist = page.list
      } else {
        console.log(msg)
      }
    },
    // 打开班级下学生
    async openStudent (info) {
      this.claName = info.claName
      this.claId = info.claId
      this.classText = false
      this.studentText = true
      const res = await this.$http.get(`classes/info/${this.claId}`)
      console.log(res)
      const {code, msg, classesVo} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.studentlist = classesVo.list
      } else {
        console.log(msg)
      }
    },
    // 删除班级下的学生
    deleteOpen (info) {
      // console.log(info.sid)
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const sid = info.sid
        const res = await this.$http.delete('cla_stu/delete', {data: {id: this.claId, ids: [sid]}})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`classes/info/${this.claId}`).then((mes) => {
            const {code, msg, classesVo: {list}} = mes.data
            // console.log(mes)
            if (code === 200) {
              this.studentlist = list
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 添加学生进入班级
    addstubtn () {
      this.form = {}
      this.dialogstu = true
    },
    async createdstu () {
      const form = {
        sid: this.form.sid,
        claId: this.claId
      }
      // console.log(form)
      const res = await this.$http.post(`cla_stu/save`, form)
      // console.log(res)
      if (res.data.status === 200) {
        this.$message.success('添加成功！')
        this.dialogstu = false
        this.$http.get(`classes/info/${this.claId}`).then((mes) => {
          const {code, msg, classesVo: {list}} = mes.data
          // console.log(this.status)
          if (code === 200) {
            this.studentlist = list
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 返回按钮
    back () {
      this.classText = true
      this.studentText = false
    },
    // 清除搜索框
    getClassclear () {
      this.getClasslist()
    },
    // 添加班级按钮
    addClassbtn () {
      this.form = {}
      this.dialogAdd = true
    },
    // 添加班级
    async createdclass () {
      const form = {
        claId: this.form.claId,
        claName: this.form.claName,
        tid: this.form.tid,
        visible: true
      }
      const res = await this.$http.post('classes/save', form)
      const {status, msg} = res.data
      // console.log(res)
      if (status === 200) {
        this.$message({
          type: 'success',
          message: '添加成功！'
        })
        this.getClasslist()
        this.dialogAdd = false
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑班级
    classEditor (info) {
      // console.log(info)
      this.dialogEdit = true
      this.form.claName = info.claName
      this.form.claId = info.claId
      // console.log(111, info.claId)
      if (info.teacher.tid) {
        this.form.tid = info.teacher.tid
      } else {
        this.form.tid = ''
      }
      // console.log(this.form)
    },
    async editorclass () {
      const form = {
        tid: this.form.tid,
        claId: this.form.claId,
        claName: this.form.claName
      }
      // console.log(form)
      const res = await this.$http.put('classes/update', form)
      const {code, msg} = res.data
      // console.log(res)
      if (code === 200) {
        this.$message({
          type: 'success',
          message: '修改成功！'
        })
        this.getClasslist()
        this.dialogEdit = false
      } else {
        this.$message.error(msg)
      }
    },
    // 删除班级
    classDelete (info) {
      this.$confirm('此操作将永久删除该班级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const claId = info.claId
        const res = await this.$http.delete('classes/delete', {data: {ids: [claId]}})
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getClasslist()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getClasslist()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      // console.log(`当前页: ${val}`)
      this.getClasslist()
    },
    // 获取焦点
    ToFocus (num) {
      if (num === 1) {
        this.$refs.one.focus()
      }
      if (num === 2) {
        this.$refs.two.focus()
      }
      if (num === 3) {
        this.$refs.three.focus()
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.class,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 100px
  .text
    padding-top 10px
    height 470px
  .Conpager
    margin 0 auto
    padding-top 5px
  .stu-pager
    margin-top 54px
    text-align center
.testcolor
  margin-left 10px
  padding-top 5px
  font-size 13px
  color red
</style>
